<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/bootstrap.css" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
    <div class="navbar navbar-fixed-top navbar-inverse">
	    <div class="navbar-inner">
		    <a class="brand" href="#">${user.name}</a>
			    <ul class="nav">
			    <li class="active"><a href="#">Home</a></li>
			    <li><a href="#">Link</a></li>
			    <li><a href="#">Link</a></li>
			    </ul>
	    </div>
    </div>
    <div class="container-fluid">
	    <div class="row-fluid" >
		    <div class="span2">
		   		     <ul class="nav nav-tabs nav-stacked ${list.size()>12?'span10':'span2 navbar-fixed-top'}" id="nav" style="margin-top:60px;">
		   		     	<c:if test="${!(empty list)}">
			   		     	<li><a><strong>组别:(${list.size() })</strong></a></li>
		   		     	</c:if>
		   		    	 <c:forEach items="${list}" var="group">
		   		    	 <li>
		   		    	 	<a href="#" onclick="allGroup(id)" id="${group.id}">${group.name}</a>
		   		    	 </li>
		   		    	 </c:forEach>
				    </ul>
		    </div>
		    <div class="span8"   style="margin-top:60px;">
		    	<table class="table table-bordered " id="table">
		    		
		    	</table>
		    </div>
		    <div class="span2"   style="margin-top:60px;">
		        <div class="page-header">
    				<h1 align="center"><small>工具类</small></h1>
  				 </div>
  				<div>
  				    <div class="alert">
	   					<a href="#" class="close" data-dismiss="alert">×</a>
    					<strong>提醒！</strong> 无提交按钮，按下回车键即可提交！
  				    </div>
  				 <a href="#" id="addFriend">添加好友</a>
  				 <div>
  				 <div id="form1" style="display:none;">
  				组名：<label><select class="input-medium" name="groupid" id="group">
  										<option value="">---</option>
  										 <c:forEach items="${list}" var="group">
		   		    						 <option value="${group.id}">${group.name}</option>
		   		    					 </c:forEach>
  										
  									</select>
  						</label>
  				姓名：<label><input type="text" class="input-medium" name="othername"></label>
  				联系方式名称：<label><input type="text" class="input-medium" name="name"></label>
  				号码：<label><input type="text" class="input-medium" name="code" onkeyup="sub(event)"></label>
  				 </div>
  				 </div>
  				 <a href="#" id="addGroup">添加组</a>
  				 <div  id="form2" style="display:none;">
  				 组名：<label><input type="text" class="input-medium" name="name1" onkeyup="sub1(event)"></label>
  				 </div>
  				</div>
		    </div>
	    </div>
    </div>
	
		<script type="text/javascript">
		function sub(event){
			var othername=document.getElementsByName("othername")[0].value;
			var name=document.getElementsByName("name")[0].value;
			var code1=document.getElementsByName("code")[0].value;
			var groupid=document.getElementsByName("groupid")[0].value;
			var code=event.keyCode;
			//alert(code);
			//alert(groupid);
			if(code==13&&(groupid!="")){
			//alert("hello");
				$.post("addFriend",{name:name,othername:othername,code:code1,groupid:groupid},function(data){
			//alert(data);
					if(data=="error pb"){
						alert("数据库错误");
					}else{
					document.getElementById("addFriend").click();
					}
				});
			}else if(code==13&&(groupid=="")){
				alert("未选择组，或请新建组！");
			}
		};
		function sub1(event){
			name=document.getElementsByName("name1")[0].value;
			var code=event.keyCode;
			if(code==13&&(name.length>0)){
				$.post("addGroup",{name:name},function(data){
					if(data=="error role"||data=="error pb"){
						alert("数据库错误");
					}else{
					document.getElementById("addGroup").click();
					 datas=data.split(";");
					$("#nav").empty();
					$("#nav").append(datas[1]);
					$("#group").empty();
					$("#group").append(datas[0]); 
					}
				});
			}
		};
		document.getElementById("addFriend").onclick=function(){
			var display=document.getElementById("form1").style.display;
			if(display=="none"){
				document.getElementById("addFriend").innerHTML="取消";
				document.getElementById("form1").style.display="block";
			}else if(display=="block"){
				document.getElementsByName("othername")[0].value="";
				document.getElementsByName("name")[0].value="";
				document.getElementsByName("code")[0].value="";
				document.getElementById("addFriend").innerHTML="添加好友";
				document.getElementById("form1").style.display="none";
			}
		};
		document.getElementById("addGroup").onclick=function(){
			var display=document.getElementById("form2").style.display;
			if(display=="none"){
				document.getElementById("addGroup").innerHTML="取消";
				document.getElementById("form2").style.display="block";
			}else if(display=="block"){
				document.getElementsByName("name1")[0].value="";
				document.getElementById("addGroup").innerHTML="添加组";
				document.getElementById("form2").style.display="none";
			}
		};
		function allGroup(id){
			var userid="${user.id}";
			$.post("allGroup",{groupid:id,userid:userid},function(data){
			$("#table").empty();
			$("#table").append(data);
			});
		};
		</script>
</body>
</html>